<template>
    <div class="container">
        <!-- 管理平台--主体列表展示 -->
        <div class="rolemanageMentMain">
            <el-row>
                <el-col :span="12">
                    <el-col :span="24" style="padding-right: 16px;">
                        <el-form
                            :inline="true"
                            :model="formData"
                            class="demo-form-inline"
                            style="margin-bottom: 16px;display: inline-block;"
                            size="small"
                        >
                            <el-form-item label="角色名称">
                                <el-input v-model="formData.roleName" placeholder="请输入角色名称"></el-input>
                            </el-form-item>
                            <el-form-item label="角色描述">
                                <el-input v-model="formData.roleDesc" placeholder="请输入角色描述"></el-input>
                            </el-form-item>
                            <el-button
                                type="primary"
                                size="small"
                                icon="el-icon-search"
                                @click="hanlesearch"
                                :loading="searchLoading"
                                class="searchBtn"
                            >查询</el-button>
                            <el-button
                                type="primary"
                                size="small"
                                icon="el-icon-refresh-right"
                                @click="handleReset"
                                :loading="resetLoading"
                                class="resetBtn"
                            >重置</el-button>
                            <el-button
                                type="primary"
                                size="small"
                                icon="el-icon-circle-plus-outline"
                                @click="hanlePush"
                            >新增</el-button>
                        </el-form>
                    </el-col>

                    <el-col :span="24" style="padding-right: 16px;">
                        <el-table
                            :data="tableData"
                            width="100%"
                            border
                            highlight-current-row
                            @row-click="handleClick"
                            stripe
                            class="heard-bg"
                        >
                            <el-table-column label="角色名称" prop="roleName"></el-table-column>
                            <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
                            <!--<el-table-column label="角色状态" prop="roleStatus"></el-table-column>-->
                            <el-table-column label="角色类型">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.roleType === '2'">管理员</span>
                                    <span v-else-if="scope.row.roleType === '4'">在线用户</span>
                                    <span v-else-if="scope.row.roleType === '5'">离线用户</span>
                                </template>
                            </el-table-column>

                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button
                                        type="primary"
                                        icon="el-icon-edit"
                                        circle
                                        @click="handleEdit(scope.row)"
                                    />
                                    <el-button
                                        type="danger"
                                        icon="el-icon-delete"
                                        circle
                                        @click="handleDelete(scope.row)"
                                    />
                                </template>
                            </el-table-column>
                        </el-table>
                        <!-- 分页 -->
                        <div class="pagination">
                            <Pagination
                                :hanleChangeCurrentPage="hanleChangeCurrentPage"
                                :handleChangeSize="handleChangeSize"
                                :currentPage="currentPage"
                                :pageSize="pageSize"
                                :total="total"
                            />
                        </div>
                    </el-col>
                </el-col>

                <el-col :span="12">
                    <el-tabs @tab-click="binding">
                        <el-tab-pane label="绑定"></el-tab-pane>
                        <el-tab-pane label="未绑定"></el-tab-pane>
                    </el-tabs>
                    <el-form
                            :inline="true"
                            :model="bindFormData"
                            class="demo-form-inline"
                            style="margin-bottom: 16px;display: inline-block;"
                            size="small"
                    >
                        <el-form-item label="用户账号">
                            <el-input v-model="bindFormData.userAccount" placeholder="请输入用户账号"></el-input>
                        </el-form-item>
                        <el-form-item label="用户名称">
                            <el-input v-model="bindFormData.userName" placeholder="请输入用户名称"></el-input>
                        </el-form-item>
                        <el-button
                                type="primary"
                                size="small"
                                icon="el-icon-search"
                                @click="hanlesearchBindOrNoBind"
                                :loading="searchLoading"
                                class="searchBtn"
                        >查询</el-button>
                        <el-button
                                type="primary"
                                size="small"
                                icon="el-icon-refresh-right"
                                @click="handleBindOrNoBindReset"
                                :loading="resetLoading"
                                class="resetBtn"
                        >重置</el-button>
                    </el-form>
                    <div wherherOrbind>
                        <el-table
                            :data="tableDataDetail"
                            width="100%"
                            border
                            @selection-change="handleSelectChange"
                            stripe
                            class="heard-bg"
                        >
                            <el-table-column width="55" type="selection"></el-table-column>
                            <el-table-column width="70" label="序号" type="index"></el-table-column>
                            <el-table-column label="用户账号" prop="userAccount"></el-table-column>
                            <el-table-column label="所属机构" prop="deptName"></el-table-column>
                            <el-table-column label="用户名称" prop="userName"></el-table-column>
                            <el-table-column label="用户类型" prop="userType">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.userType === '0'">普通用户</span>
                                    <!--<span v-else-if="scope.row.userType === '1'">超级管理员</span>-->
                                    <span v-else-if="scope.row.userType === '2'">超级管理员</span>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!-- 分页 -->
                        <div class="pagination">
                            <Pagination
                                :hanleChangeCurrentPage="hanleChangeCurrentPageDetail"
                                :handleChangeSize="handleChangeSizeDetail"
                                :currentPage="currentPageDetail"
                                :pageSize="pageSizeDetail"
                                :total="totalDetail"
                            />
                        </div>
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-s-custom"
                            style="float:right;margin-top:35px;"
                            @click="handlewherherOrbind"
                        >{{wherherOrbind ? '解绑' : '绑定'}}</el-button>
                    </div>
                </el-col>
            </el-row>
        </div>

        <el-dialog
            v-drag
            :close-on-click-modal="false"
            :visible.sync="Show"
            append-to-body
            center
            width="500px"
        >
            <div slot="title">{{EditTitle}}</div>
            <el-form
                :model="Edit"
                class="menu-setting"
                label-position="right"
                ref="Edit"
                label-width="110px"
                :rules="formRules"
                size="small"
            >
                <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="Edit.roleName" placeholder="请输入" style="width: 200px;" />
                </el-form-item>
                <el-form-item label="角色类型" prop="roleType">
                    <el-select
                        v-model="Edit.roleType"
                        placeholder="请选择"
                        style="width: 200px;"
                        clearable
                    >
                        <el-option
                            v-for="item in roleTypeList"
                            :key="item.code"
                            :label="item.label"
                            :value="item.code"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="角色描述" prop="roleDesc">
                    <el-input v-model="Edit.roleDesc" placeholder="请输入" style="width: 200px;" />
                </el-form-item>
                <!--<el-form-item label="角色状态" prop="roleStatus">-->
                <!--<el-input v-model="Edit.roleStatus" placeholder="请输入"  style="width: 200px;"/>-->
                <!--</el-form-item>-->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button
                    size="small"
                    icon="el-icon-circle-close"
                    @click="Show = false"
                    class="cancelBtn"
                >取 消</el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click="submitEdit"
                    class="submitBtn"
                    icon="el-icon-circle-check"
                >确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination/Pagination.vue';
import { getDictSelectList } from '@/utils/Common';

export default {
    name: 'roleManagement',
    components: {
        Pagination,
    },
    data() {
        return {
            formData: {
                roleName: '',
                roleDesc: '',
            },
            bindFormData: {
                userAccount: '',
                userName: '',
            },
            // 新增字典字段
            Edit: {
                roleName: null,
                roleDesc: null,
                roleType: null,
            },
            roleTypeList: [],
            EditTitle: '',
            Show: false,
            // 搜索loading
            searchLoading: false,
            // 重置loading
            resetLoading: false,
            formRules: {
                roleName: [
                    { required: true, message: '请输入中文字典名', trigger: 'blur' },
                    { max: 30, message: '字符最大长度为30', trigger: 'blur' },
                ],
                roleType: [
                    { required: true, message: '请选择角色类型', trigger: 'change' },
                ],
            },
            // 当前页码
            currentPage: 1,
            // 页码大小
            pageSize: 10,
            // 总数
            total: 0,
            // 当前页码
            currentPageDetail: 1,
            // 页码大小
            pageSizeDetail: 10,
            // 总数
            totalDetail: 0,
            // 表格内容
            tableData: [],
            // 表格内容
            tableDataDetail: [],
            selections: [],
            rowObj: {},
            wherherOrbind: true,
            bindFlag: 1,
            bindFlagId: '',
        };
    },
    async mounted() {
        this.getInitData(this.formData);
        this.roleTypeList = await getDictSelectList('ROLE_TYPE', this);
    },
    methods: {
        // 获取字典表格数据
        getInitData(form) {
            let params = {
                pageNum: this.currentPage,
                pageSize: this.pageSize,
            };
            params = Object.assign({}, params, form);
            this.$post.roleMangage.searchByRole(params)
                .then((res) => {
                    if (res.data.success) {
                        this.tableData = res.data.content.roleList;
                        this.total = res.data.content.roleCount;
                    }
                });
        },
        handleSelectChange(val) {
            this.selections = val;
        },
        // 点击某一行查询详情
        handleClick(row) {
            this.rowObj = row;
            const params = {
                pageNum: this.currentPageDetail,
                pageSize: this.pageSizeDetail,
                id: row.id,
                bindFlag: this.bindFlag,
                userAccount: this.bindFormData.userAccount,
                userName: this.bindFormData.userName,
            };
            this.$post.userManage.getUserListByRoleId(params)
                .then((res) => {
                    if (res.data.success) {
                        this.tableDataDetail = res.data.content.userList;
                        this.totalDetail = res.data.content.userCount;
                    }
                });
            this.currentPageDetail = 1;
        },
        // 点击搜索
        hanlesearch() {
            this.currentPage = 1;
            this.pageSize = 10;
            this.getInitData(this.formData);
            this.tableDataDetail = [];
            this.totalDetail = 0;
        },

        // 点击绑定搜索
        hanlesearchBindOrNoBind() {
            this.currentPage = 1;
            this.pageSize = 10;
            this.handleClick(this.rowObj);
            this.tableDataDetail = [];
            this.totalDetail = 0;
        },

        // 点击绑定重置
        handleBindOrNoBindReset() {
            this.bindFormData = {
                userAccount: '',
                userName: '',
            };
            this.currentPageDetail = 1;
            this.pageSizeDetail = 10;
            this.getInitData(this.formData);
            this.tableDataDetail = [];
            this.totalDetail = 0;

        },

        // 点击重置
        handleReset() {
            this.formData = {
                roleName: '',
                roleDesc: '',
            };
            this.currentPage = 1;
            this.pageSize = 10;
            this.getInitData(this.formData);
            this.tableDataDetail = [];
            this.totalDetail = 0;
        },
        // 点击新增
        hanlePush() {
            this.EditTitle = '添加角色';
            this.Edit = {};
            this.Show = true;
            // 解决一进来就进行表单验证问题
            if (this.$refs.Edit) {
                this.$refs.Edit.resetFields();
            } else {
                this.$nextTick(() => {
                    // this.$refs.Edit.resetFields();
                });
            }
        },
        // 点击编辑
        handleEdit(row) {
            this.EditTitle = '编辑角色';
            this.Edit = JSON.parse(JSON.stringify(row));
            this.Show = true;
            if (this.$refs.Edit) {
                this.$refs.Edit.resetFields();
            } else {
                this.$nextTick(() => {
                    // this.$refs.Edit.resetFields();
                });
            }
        },
        // 单个删除角色
        handleDelete(row) {
            this.$confirm('确认删除该角色？', '提示', { customClass: 'warning', type: 'warning' })
                .then(() => {
                    this.$post.roleMangage.deleteRole({ id: row.id })
                        .then((res) => {
                            if (res.data.success) {
                                this.$message.success('删除成功！');
                                if (this.tableData.length === 1) {
                                    this.currentPage = this.currentPage - 1;
                                }
                                this.getInitData(this.formData);
                                this.tableDataDetail = [];
                                this.totalDetail = 0;
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        });
                })
                .catch(() => {
                });
        },


        // 新增点击确定按钮
        submitEdit() {
            if (this.Edit.id) {
                // 编辑
                this.$refs.Edit.validate((valid) => {
                    if (valid) {
                        this.$post.roleMangage.updateRole(this.Edit)
                            .then((res) => {
                                if (res.data.success) {
                                    this.$message.success('修改成功！');
                                    this.getInitData(this.formData);
                                    this.Show = false;
                                } else {
                                    this.$message.error(res.data.msg);
                                }
                            });
                    } else {
                        this.$message.warning('请完成表单填写！');
                    }
                });
            } else {
                // 添加
                this.$refs.Edit.validate((valid) => {
                    if (valid) {
                        this.$post.roleMangage.addRole(this.Edit)
                            .then((res) => {
                                if (res.data.success) {
                                    this.$message.success('添加成功！');
                                    this.getInitData(this.formData);
                                    this.tableDataDetail = [];
                                    this.totalDetail = 0;
                                    this.Show = false;
                                } else {
                                    this.$message.error(res.data.msg);
                                }
                            });
                    } else {
                        this.$message.warning('请完成表单填写！');
                    }
                });
            }
        },
        binding(tab) {
            if (tab.label === '绑定') {
                this.wherherOrbind = true;
                this.bindFlag = 1;
                this.handleClick(this.rowObj);
            } else {
                this.wherherOrbind = false;
                this.bindFlag = 2;
                this.handleClick(this.rowObj);
            }
        },
        // 用户点击绑定按钮
        handlewherherOrbind() {
            if (!this.rowObj.id) {
                this.$message.warning('请先选择一项角色进行操作！');
                return;
            }
            if (this.selections.length <= 0) {
                this.$message.warning('至少选择一项进行操作！');
                return;
            }
            const arr = [];
            this.selections.forEach((item) => {
                arr.push(item.id);
            });
            if (this.bindFlag === 1) {
                this.bindFlagId = 2;
            } else {
                this.bindFlagId = 1;
            }
            // 执行解绑操作
            const params = {
                bindFlag: this.bindFlagId,
                id: this.rowObj.id,
                ids: arr,
            };
            // params = Object.assign({}, params, arr);
            this.$post.grantRole.grant(params)
                .then((res) => {
                    if (res.data.success) {
                        this.$message.success('操作成功！');
                        if (this.tableDataDetail.length === 1) {
                            this.currentPageDetail = this.currentPageDetail - 1;
                        }
                        this.handleClick(this.rowObj);
                    } else {
                        this.$message.error('操作失败！');
                    }
                });
        },


        // 页码切换方法
        hanleChangeCurrentPage(val) {
            this.currentPage = val;
            this.getInitData(this.formData);
            this.tableDataDetail = [];
            this.totalDetail = 0;
        },
        // 切换分页大小方法
        handleChangeSize(val) {
            this.pageSize = val;
            this.getInitData(this.formData);
            this.tableDataDetail = [];
            this.totalDetail = 0;
        },
        // 页码切换方法
        hanleChangeCurrentPageDetail(val) {
            this.currentPageDetail = val;
            this.handleClick(this.rowObj);
        },
        // 切换分页大小方法
        handleChangeSizeDetail(val) {
            this.pageSizeDetail = val;
            this.handleClick(this.rowObj);
        },
    },
};
</script>

<style lang="scss">
.rolemanageMentMain {
    .el-tabs__item {
        padding: 0 15px !important ;
        border: 1px solid #409eff;
        border-radius: 4px;
        margin-right: 3px;
        color: #409eff;
    }
    .is-active {
        background-color: #409eff;
        color: #fff;
    }
}
</style>
<style  lang="scss" scoped>
.container {
    width: 100%;
    height: 100%;
    .rolemanageMentMain {
        width: 100%;
        background: #fff;
        margin: 0 0 15px;
        // border-radius:5px;
        padding: 20px;
        box-sizing: border-box;
        text-align: left;
        .tableTitle {
            width: 100%;
            height: 48px;
            border: 1px solid #eee;
            border-bottom: none;
            line-height: 48px;
            margin-top: 20px;
            color: #666;
        }
        .pagination {
            margin-top: 20px;
            text-align: right;
            float: left;
        }
    }
}
</style>
